<template>
	<view class="item_set" :style="{paddingTop:paddingTop + 'px',paddingBottom:paddingTop + 'px',borderBottomColor}">
		<view class="left">
			<view class="title">{{title}}</view>
			<view class="desc" v-if="desc">{{desc}}</view>
		</view>
		<view class="right">
			<!-- 自定义插槽 -->
			<slot name="right"></slot>
			<text class="icon" v-if="showRightIcon" :class="'cuIcon-' + rightIcon"></text>
		</view>
	</view>
</template>

<script>
	/**
	 * title 				标题							String
	 * desc 				标题下描述		 			String
	 * showRightIcon 		是否显示右侧图标	 			Boolean
	 * rightIcon 			右侧图标 不带前缀cuIcon- 		String
	 * paddingTop 			上下间距						Number
	 * borderBottomColor 	底线颜色 					String
	 */
	export default {
		props: {
			title: {
				type: String,
			},
			desc: {
				type: String,
			},
			showRightIcon: {
				type: Boolean,
				default: true
			},
			rightIcon: {
				type: String,
				default: "right"
			},
			paddingTop: {
				type: Number,
				default: 10
			},
			borderBottomColor: {
				type: String,
				default: "#f5f5f5"
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.item_set {
		display: flex;
		align-items: center;
		line-height: 1;
		border-bottom: 1px $roc-color-f5 solid;

		.left {
			.title {
				font-size: 30rpx;
				color: #666666;
			}

			.desc {
				font-size: 24rpx;
				color: $roc-color-999;
				margin-top: 6px;
			}
		}

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			.icon {
				font-size: 28rpx;
				// color: $roc-color-999;
			}
		}
	}
</style>
